[data-component='AppLoading'] {
  &.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: $light;
  }

  .loading-box {
    position: relative;
    width: 300px;
    height: 300px;
  }

  .loading-box .sun {
    position: absolute;
    top: 135px;
    left: calc(50% - 136px / 2);
    width: 136px;
    height: 136px;
    animation: sun 2.7s linear infinite;
  }

  .loading-box .sun .sun-body {
    position: absolute;
    top: 18px;
    left: 18px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 6px solid $dark;
    animation: sun-body 2.7s linear infinite;
  }

  .loading-box .sun .sun-body .line {
    position: absolute;
    top: -24px;
    left: calc(50% - 3px);
    width: 6px;
    height: 12px;
    border-radius: 6px;
    background-color: $warning;
    transform-origin: center 68px;
  }

  .loading-box .sun .eye {
    position: absolute;
    top: 60px;
    left: 40px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: $info;
    box-shadow: 16px 0 $info;
    animation: eye 2.7s linear infinite;
  }

  .loading-box .horizon {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 115px;
    background-color: $light;
  }

  .loading-box .horizon::before {
    content: '';
    position: absolute;
    left: 5%;
    width: 90%;
    height: 6px;
    border-radius: 6px;
    background-color: $dark;
  }

  .loading-box .horizon::after {
    content: 'Loading...';
    position: absolute;
    top: 30px;
    width: 100%;
    text-align: center;
    font-size: 25px;
    color: $dark;
    animation: loading 2.7s linear infinite;
  }

  @keyframes sun {
    10% {
      transform: translate(0);
    }
    40%,
    70% {
      transform: translateY(-40px);
    }
  }

  @keyframes sun-body {
    40% {
      transform: rotate(0);
    }
    50%,
    100% {
      transform: rotate(45deg);
    }
  }

  @keyframes eye {
    50%,
    60% {
      transform: scale(1);
    }
    55% {
      transform: scaleY(0.1);
    }
    70%,
    100% {
      transform: translateX(34px);
    }
  }

  @keyframes loading {
    40% {
      opacity: 1;
    }
    60% {
      opacity: 0;
    }
  }
}
